<nz-modal
  nzClassName="followup-model"
  [nzWidth]="1000"
  [(nzVisible)]="isModelVisible"
  [nzTitle]="modalTitle"
  [nzContent]="modalContent"
  [nzFooter]="null"
  (nzAfterOpen)="initData()"
  (nzOnCancel)="handleCancel()"
>
  <ng-template #modalTitle>跟进</ng-template>

  <ng-template #modalContent>
    <div class="form-wrap">
      <div>
        <nz-textarea-count [nzMaxCharacterCount]="100">
          <textarea maxlength="100" [(ngModel)]="content" nz-input placeholder="请输入内容..."></textarea>
        </nz-textarea-count>
      </div>
      <div class="opera-p">
        <div>
          <nz-upload
            nzAction=""
            [nzShowUploadList]="false"
            (nzChange)="handleChange($event)"
          >
            <button nz-button>
              <i nz-icon nzType="upload"></i>
              Upload
            </button>
            <span class="upload-tip">请选择图片、office文件、PDF文件</span>
          </nz-upload>
          <ul class="file-ul">
            <li *ngFor="let item of fileList; let index = index;">
              {{ item.name }}
              <button nz-button nzType="link" nzDanger [nzLoading]="isConfirmLoading">
                <i nz-icon nzType="delete" nzTheme="outline" (click)="deletFile(index)"></i>
              </button>
            </li>
          </ul>
        </div>
        <button nz-button nzType="primary" (click)="handleOk()">提交</button>
      </div>
    </div>

    <!-- 跟进记录 -->
    <div class="table-wrap">
      <p class="title-p">跟进记录</p>
      <div class="table-box">
        <nz-table
          #modelTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          [nzBordered]="true"
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="tableForms.tableLoading"
          [nzData]="modelTableData"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="tableForms.total"
          [nzPageIndex]="tableForms.page"
          [nzPageSize]="tableForms.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onPageIndexChange($event)"
          (nzPageSizeChange)="onPageSizeChange($event)">
          <thead>
            <tr>
              <th nzAlign="center">ID</th>
              <th nzAlign="center">跟进时间</th>
              <th nzAlign="center">跟进人</th>
              <th nzAlign="center">跟进内容</th>
              <th nzAlign="center" style="min-width: 80px;">附件</th>
            </tr>
          </thead>

          <tbody>
            <tr *ngFor="let data of modelTable.data">
              <td nzAlign="center">{{ data.id }}</td>
              <td nzAlign="center">{{ data.createTime || '-' }}</td>
              <td nzAlign="center">{{ data.follower || '-' }}</td>
              <td nzAlign="center" nzBreakWord>{{ data.content || '-' }}</td>
              <td nzAlign="center">
                <p *ngFor="let tag of data.enclosure">
                  {{ interceptStr(tag) }}
                  <button *ngIf="tag" nz-button nzType="link" nzSize="small" (click)="downFile(tag)">下载</button>
                </p>
              </td>
            </tr>
          </tbody>
        </nz-table>

        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template>
      </div>
    </div>
  </ng-template>
</nz-modal>